<template>
  <el-table :data="tableData" style="width: 100%" border @scroll="handleScroll">
    <!-- 显示所有列 -->
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :fixed="column.fixed || (column.slotName === 'operation' ? 'right' : '')"
    >
      <template #default="scope">
        <slot
          :name="column.slotName"
          v-if="column.slotName"
          :row="scope.row"
        ></slot>
        <!-- 如果没有指定slotName，则直接显示数据 -->
        <span v-else>{{ scope.row[column.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "CustomTable",
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    tableColumns: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleScroll() {
      console.log("Table is scrolling");
    },
  },
};
</script>

<style scoped>
.el-table__body-wrapper {
  max-height: 400px; /* 你可以根据需要调整这个高度 */
  overflow-y: auto;
}

/* 添加横向滚动条 */
.el-table {
  overflow-x: auto;
}
</style>